<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="box">
    <div style="margin-bottom: 40px;">
      <el-button type="primary" @click="BackOff">返回</el-button>
    </div>
    <el-form ref="form" label-width="150px" label-position="left">
      <el-form-item label="用户类型:">
        <span>{{ form.userType === '1'? '企业用户':'个人用户' }}</span>
      </el-form-item>

      <div v-if="form.userType === '1'" class="two-box">
        <el-form-item label="执照名称:" class="two-box-one">
          <span>{{ form.licenseName }}</span>
        </el-form-item>
        <el-form-item label="营业执照:">
          <img :src="form.licensePath" class="showImg">
        </el-form-item>
      </div>

      <div v-if="form.userType === '1'" class="two-box">
        <el-form-item label="联系人姓名:" class="two-box-one">
          <span>{{ form.contactName }}</span>
        </el-form-item>
        <el-form-item label="联系人手机号:">
          <span>{{ form.contactPhone }}</span>
        </el-form-item>

      </div>
      <div v-if="form.userType === '1'" class="two-box">
        <el-form-item label="法人姓名:" class="two-box-one">
          <span>{{ form.corpName }}</span>
        </el-form-item>
        <el-form-item label="法人证件号码:">
          <span>{{ form.corpCerNo }}</span>
        </el-form-item>
      </div>
      <el-form-item v-if="form.userType === '1'" label="法人证件有效期:">
        <span>{{ form.cerBeginDate }}-{{ form.cerEndDate }}</span>
      </el-form-item>
      <div v-if="form.userType === '1'" class="two-box">
        <el-form-item label="法人身份证正面:" class="two-box-one">
          <img :src="form.cerFrontPath" class="showImg">
        </el-form-item>
        <el-form-item label="法人身份证反面:">
          <img :src="form.cerBehindPath" class="showImg">
        </el-form-item>
      </div>
      <div v-if="form.userType === '1'" class="two-box">
        <el-form-item label="营业执照编号:" class="two-box-one">
          <span>{{ form.licenseNo }}</span>
        </el-form-item>
        <el-form-item label="执照有效期:">
          <span>{{ form.licenseBeginDate }}-{{ form.licenseEndDate }}</span>
        </el-form-item>
      </div>
      <el-form-item v-if="form.userType === '1'" label="执照地址:">
        <span>{{ form.licenseProvinceName }}{{ form.licenseCityName }}{{ form.licenseAreaName }}</span>
      </el-form-item>
      <el-form-item v-if="form.userType === '1'" label="详细地址:">
        <span>{{ form.licenseAddr }}</span>
      </el-form-item>
      <div class="two-box">
        <el-form-item label="结算类型:" class="two-box-one">
          <span>{{ stlType }}</span>
        </el-form-item>
        <el-form-item label="结算周期:">
          <span>T1</span>
        </el-form-item>

      </div>
      <div v-if="stlType === '非法人对私' && form.userType === '1'" class="two-box">
        <el-form-item label="结算户身份证正面:" class="two-box-one">
          <img :src="form.stlCerFrontPath" class="showImg">
        </el-form-item>
        <el-form-item label="结算户身份证反面:">
          <img :src="form.stlCerBehindPath" class="showImg">
        </el-form-item>
      </div>
      <div v-if="stlType === '法人对私' && form.userType === '3'" class="two-box">
        <el-form-item label="结算户身份证正面:" class="two-box-one">
          <img :src="form.stlCerFrontPath" class="showImg">
        </el-form-item>
        <el-form-item label="结算户身份证反面:">
          <img :src="form.stlCerBehindPath" class="showImg">
        </el-form-item>
      </div>
      <div v-if="stlType === '非法人对私' && form.userType === '1'" class="two-box">
        <el-form-item label="结算户身份证号:" class="two-box-one">
          <span>{{ form.stlCerNo }}</span>
        </el-form-item>
        <el-form-item label="结算户身份证有效期:">
          <span>{{ form.stlCerBeginDate }}-{{ form.stlCerEndDate }}</span>
        </el-form-item>
      </div>
      <div v-if="stlType === '法人对私' && form.userType === '3'" class="two-box">
        <el-form-item label="结算户身份证号:" class="two-box-one">
          <span>{{ form.stlCerNo }}</span>
        </el-form-item>
        <el-form-item label="结算户身份证有效期:">
          <span>{{ form.stlCerBeginDate }}-{{ form.stlCerEndDate }}</span>
        </el-form-item>
      </div>
      <el-form-item v-if="form.userType === '3'" label="详细地址" prop="userAddress">
        <el-input v-model="form.userAddress" :disabled="true" type="textarea" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item v-if="stlType === '法人对私' || stlType === '非法人对私'" label="银行卡正面:">
        <img :src="form.cardFrontPath" class="showImg">
      </el-form-item>
      <el-form-item v-if="form.openPermitPath && stlType === '法人对公'" label="开户许可证:">
        <img :src="form.openPermitPath" class="showImg">
      </el-form-item>
      <div class="two-box">
        <el-form-item label="结算账户名:" class="two-box-one">
          <span>{{ form.stlAccName }}</span>
        </el-form-item>
        <el-form-item label="结算卡号:">
          <span>{{ form.stlBankNo }}</span>
        </el-form-item>
      </div>
      <div class="two-box">
        <el-form-item label="开户省市:" class="two-box-one">
          <span>{{ form.stlProvinceName }}{{ form.stlCityName }}{{ form.stlAreaName }}</span>
        </el-form-item>
        <el-form-item label="开户总行:">
          <span>{{ form.stlBankName }}</span>
        </el-form-item>
      </div>
      <div class="two-box">
        <el-form-item label="支行名称:" class="two-box-one">
          <span>{{ form.stlSubBankName }}</span>
        </el-form-item>
        <el-form-item label="预留手机:">
          <span>{{ form.stlPhone }}</span>
        </el-form-item>
      </div>
      <el-form-item v-if="form.relationPath && stlType === '非法人对私'" label="关系证明:">
        <img :src="form.relationPath" class="showImg">
      </el-form-item>
      <div style="width: 100%;height: 2px;background-color: #000000;" />
      <div v-if="form.auditStatus === '0' || form.auditStatus === '3'" style="margin-top: 20px;">
        <el-form-item label="开户状态:">
          <span>审核中</span>
        </el-form-item>
        <el-form-item label="提交时间:">
          <span>{{ form.createTime }}</span>
        </el-form-item>
      </div>
      <div v-if="form.auditStatus === '2'">
        <div class="two-box">
          <el-form-item label="开户状态:" class="two-box-one">
            <span>审核拒绝</span>
          </el-form-item>
          <el-form-item label="提交时间:">
            <span>{{ form.createTime }}</span>
          </el-form-item>
        </div>
        <div class="two-box">
          <el-form-item label="审核时间:" class="two-box-one">
            <span>{{ form.updateTime }}</span>
          </el-form-item>
          <el-form-item label="拒绝原因:">
            <span>{{ form.auditMsg }}</span>
          </el-form-item>
        </div>
      </div>
      <div v-if="form.auditStatus === '1'">
        <div class="two-box">
          <el-form-item label="开户状态:" class="two-box-one">
            <span>审核通过</span>
          </el-form-item>
          <el-form-item label="提交时间:">
            <span>{{ form.createTime }}</span>
          </el-form-item>
        </div>
        <el-form-item label="审核时间:">
          <span>{{ form.updateTime }}</span>
        </el-form-item>
      </div>
    </el-form>

  </div>
</template>

<script>
import {
  detail
} from '@/api/user/auth'
export default {
  data() {
    return {
      form: {},
      stlType: '',
      fullscreenLoading: true
    }
  },
  mounted() {
    this.getDetaildata()
  },
  methods: {
    // 返回
    BackOff() {
      this.$router.push({ name: 'SystemUserSetting' })
    },
    // 渠道补充信息详情
    getDetaildata() {
      detail().then(res => {
        this.fullscreenLoading = false
        if (res.succeed) {
          console.log('渠道补充信息详情', res)
          this.form = res.data
          if (this.form.stlType === '1') {
            this.stlType = '法人对公'
          } else if (this.form.stlType === '2') {
            this.stlType = '法人对私'
          } else {
            this.stlType = '非法人对私'
          }
          if (res.data.auditStatus === '0' || res.data.auditStatus === '3') {
            this.auditStatus = '审核中'
            this.isDisable = true
          } else if (res.data.auditStatus === '1') {
            this.auditStatus = '审核通过'
            this.isDisable = false
          } else {
            this.auditStatus = '审核拒绝'
            this.auditMsg = res.data.auditMsg
            this.auditMsgShow = true
            this.isDisable = false
          }
        }
      })
    }

  }
}
</script>

<style scoped="scoped" lang="scss">

  .box {
    padding: 40px 15% 40px 5%;

    .showImg {
      width: 180px;
      height: 80px;
    }

    .two-box {
      display: flex;
      //justify-content: space-between;

      .two-box-one{
        width:60%;
      }
    }

  }
</style>
